<template>
    <div>
        <el-card shadow="never">
            <template slot="header">
                <span>字典类型列表</span>
            </template>

            <el-button type="primary" @click="handleAddForType" v-auth="'add'" style="margin-bottom: 20px;">新增字典类型</el-button>

            <!-- 表格区域 -->
            <el-table v-loading="listLoading" element-loading-text="数据正在加载中" :data="list" border fit
                highlight-current-row style="width: 100%">
                <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
                    :align="item.align" :width="item.width" />
                    
                <el-table-column label="操作" width="240" align="center">
                    <template slot-scope="{ row }">
                        <el-button size="mini" type="primary" @click="handleDictData(row)">字典数据</el-button>
                        <el-button size="mini" type="primary" @click="handleEdit(row)" v-auth="'edit'">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(row)" v-auth="'del'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <Pagination :page="page" :page_size="page_size" :total="total" @sizeChange="sizeChange"
                @currentChange="pageChange" />
        </el-card>

        <TypeAddOrEdit ref="typeAddOrEditRef" @refresh="getList" />
    </div>
</template>

<script>
import Search from '@/components/Search.vue'
import Pagination from '@/components/Pagination.vue'
import { dictTypeList, dictTypeDelete } from './api/dictionaryType'
import TypeAddOrEdit from './TypeAddOrEdit.vue'

// 列配置与搜索配置
const COLUMNS = [
    { label: '字典主键', prop: 'dictId', align: 'center', width: 100 },
    { label: '字典名称', prop: 'dictName', align: 'left' },
    { label: '字典类型', prop: 'dictType', align: 'left' },
    { label: '创建时间', prop: 'createDate', align: 'center', width: 180 },
    { label: '更新时间', prop: 'updateDate', align: 'center', width: 180 },
    { label: '备注', prop: 'remark', align: 'left' }
]

const SEARCH_OPTIONS = [
    { label: '字典名称', key: 'dictName', type: 'input', placeholder: '支持模糊搜索' },
    { label: '字典类型', key: 'dictType', type: 'input' }
]

export default {
    name: 'DictTypeList',
    components: { Search, Pagination, TypeAddOrEdit },
    data() {
        return {
            searchOptions: SEARCH_OPTIONS,
            columns: COLUMNS,
            listLoading: false,
            list: [],
            page: 1,
            total: 0,
            page_size: 20,
            searchParams: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        handleDictData(row) {
            this.$router.push({
                path: '/system/dictData',
                query: {
                    dictType: row.dictType
                }
            })
        },
        handleAddForType() {
            this.$refs.typeAddOrEditRef.openAdd()
        },
        handleEdit(row) {
            this.$refs.typeAddOrEditRef.openEdit(row)
        },
        handleDelete(row) {
            this.$confirm('确定删除该字典类型吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                dictTypeDelete(row.dictId).then(res => {
                    this.$message.success('删除成功')
                    this.getList()
                })
            })
        },
        async getList() {
            this.listLoading = true
            try {
                const params = {
                    current: this.page,
                    size: this.page_size,
                    ...this.searchParams
                }
                const res = await dictTypeList(params)
                // 接口返回结构包含: records/total 或 data 数组
                if (Array.isArray(res)) {
                    this.list = res
                    this.total = res.length
                } else {
                    this.list = res.records || res.list || []
                    this.total = res.total || res.count || 0
                }
            } finally {
                this.listLoading = false
            }
        },
        handleSearch(params) {
            this.searchParams = params
            this.page = 1
            this.getList()
        },
        sizeChange(size) {
            this.page_size = size
            this.page = 1
            this.getList()
        },
        pageChange(page) {
            this.page = page
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped></style>
